<template>
    <div class="UserBg">
        <div class="UserHead">
            <div class="UserBimg">
                <img src="../image/Head.jpg" class="img">
            </div>
            <div class="UserSort">
                <div class="SortSelect">
                    <!-- <div class="selected">账号信息</div>
                    <div>阅读历史</div>
                    <div>我的追漫</div> -->
                    <div v-for="(item,index) in lists" :class="[idx == index?'selected':'']" @click="isSelected(index)">{{item}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name : "UserBg",
    data(){
       return{
           lists:['账号信息','阅读历史','我的追漫'],
                idx:0
    }
    },
    methods:{
                isSelected(index){
                    this.idx=index
                }
    }
}

</script>

<style>
 .selected{
            width: 80px;
            background-color: white;
        }
        .UserBg{
            background-color: rgb(95, 93, 93);
            height: 250px;
        }
        /* 用户头部内容 */
        .UserHead{
            position: relative;
            top:100px;
            height: 150px;
            width: 1000px;
            margin: auto;
            border-radius: 10px 10px 0px 0px;
            background-color: rgb(243, 233, 233);
        }
        /* 图片容器 */
        .UserBimg{
            border-radius: 50%;
            width: 150px;
            height: 150px;
            position: relative;
            top:-70px;
            left: 80px;
        }
        /* 图片 */
        .img{
            border-radius: 50%;
            width: 150px;
            height: 150px;
        }
        /* 容器 */
        .UserSort{
            width: 450px;
            height: 100px;
            /* border: 1px solid black; */
            position: relative;
            top:-100px;
            left: 305px;
        }
        /* 分类选项总内容 */
        .SortSelect{
            position: relative;
            top:30px;
            margin: auto;
            width: 450px;
            height: 42px;
            background-color: rgb(202, 202, 202);
            border-radius: 5px 5px 5px 5px;
        }
        /* 分类选项单项内容 */
        .UserSort .SortSelect div{
            margin-top: 3px;
            margin-left: 3px;
            width: 146px;
            height: 35px;
            /* border: 1px solid black; */
            float: left;
            font-size: 25px;
            cursor: pointer;
            border-radius: 3px 3px 3px 3px;
            text-align: center;
        }
        /* 类型内容 */
        .UserContent{
            margin: auto;
            width: 1000px;
            height: 800px;
            /* border: 1px solid black; */
            background-color: rgb(243, 233, 233);
               
        }
        /* 用户信息内容 */
        .UserInfo{
            margin: auto;
            width: 800px;
            height: 500px;
            /* border: 1px solid black; */
        }
        .UserInfo div{
            float: left;
        }
        /* 用户数据 */
        .User{
            margin-left:30px;
            width: 220px;
            height: 300px;
            /* border: 1px solid black; */
        }
        /* 更改按钮 */
        .button{
            background-color: rgb(224, 215, 215);
            border: 1px solid gray;
            width: 80px;
            height: 25px;
            border-radius: 3px 3px 3px 3px;
            cursor: pointer;
        }
        .button:hover{
            background-color: rgb(233, 232, 232);
        }
</style>